<template>
  <el-dialog title="编辑"  :close-on-click-modal="false" :visible.sync="show" class="dialog_index dialog_banner dialog_file_add"
   :before-close="cancle">
    <el-form ref="form" v-loading="loading" class="support_file_form_add">
      <el-tabs type="card" v-model="activeName">
          <el-tab-pane :label="item.site" :name="item.site"  v-for="item  in formList" :key="item.id">
            <el-form-item label="文件类型：" class="multipleSelect">
              <el-select  v-model="item.file_type_support_id"  filterable multiple
              :placeholder="'文件类型('+item.site+')（必填项)'"    @change="(value)=>changeFileType(value, item)" >
                <el-option v-for="item in item.fileTypeList" :key="item.id" :value="item.support_id" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="文件名称：">
              <el-input  :placeholder="'文件名称('+item.site+')（必填项)'" v-model="item.file_name"></el-input>
            </el-form-item>
            <el-form-item label="文件版本号：">
              <el-input  :placeholder="'文件版本号('+item.site+')（必填项)'" @change="changeFileNo" v-model="item.file_no"></el-input>
            </el-form-item>
             <el-form-item label="发布时间：" class="release_time">
                <el-date-picker v-model="item.release_time" type="date"   value-format="yyyy-MM-dd" @change="changeReleaseTime" :placeholder="'发布时间('+item.site+')（必填项)'"> </el-date-picker>
             </el-form-item>
            <el-form-item label="上传文件：" class="fileupload">
              <div class="fileupload_input">
                <el-input readonly :placeholder="'上传文件('+item.site+')（必填项)'" v-model="item.file"></el-input>
                <el-upload class="uploadFile" :action="actionUrl" 
                :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, item)"
                  :on-error="handleError" :before-upload="beforeUpload" :show-file-list="false"  :data="{type:'file'}" >
                  <el-button slot="trigger" size="small" type="search">上传文件</el-button>
                </el-upload>

              </div>
              <p>一次只能上传一个，文件格式不限，大小≤60M</p>
            </el-form-item>
             <el-form-item label="文件说明：" >
              <el-input type="textarea"  autosize resize="none" :placeholder="'文件说明('+item.site+')（必填项)'" v-model="item.file_description" ></el-input>
            </el-form-item>
          </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="search" @click="submitForm" :loading="isSubmit">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { editGet, editPost } from '@/api/support/files.js'
import { allFileTypeList } from '@/api/support/fileType.js'
export default {
  props: {
    show: Boolean,
    closeAddDialog:Function,
    id:Number
  },
  data() {
    return {
      formList: [],
      loading: false,
      activeName: 'us',
      isSubmit: false,
      actionUrl: "/api/api/general/upload_file",
    }
  },

  watch: {
    show:function(){
      if(this.show){
        this.loading = true
        this.isSubmit = false
        this.getData()
      }
    }
  },
  methods:{
    changeFileNo(value){
      for (let i = 0; i < this.formList.length; i++) {
        this.formList[i].file_no = value;
      }
    },
    changeReleaseTime(value){
      for (let i = 0; i < this.formList.length; i++) {
        this.formList[i].release_time = value;
        
      }
    },
    changeFileType (value, item) {
      let list = this.formList 
      for(let i =0; i< list.length; i++){
        list[i].file_type_support_id = item.file_type_support_id
      }
    },
    handleSuccess(response){
      this.image = response.data.filePathNameHttp
      for(let i =0; i< this.formList.length; i++){
        this.formList[i].file = response.data.filePathName
        this.formList[i].file_size = response.data.file_size
        this.formList[i].file_ext = response.data.file_ext
      }
      this.$message.success('上传文件成功')   
    },
    handleError(){
      this.$message.error('上传文件失败')   
    },
    beforeUpload(file){
      const isLt2M = file.size / 1024  <=  60*1024;
      if(!isLt2M){
        this.$message.error("上传文件大小不超过60M")
        return false
      }
    },
    getAllFileTypeList(){ // 获取所有的文件类型
      allFileTypeList().then(res=>{
        let data = res.data
        let list = this.formList
        for(let i = 0; i < list.length; i++){
          list[i].fileTypeList = data[list[i].site_id]
        }
        this.formList = list
      })
    },
    getData () {
      let params = {
        support_id: this.id
      }
      editGet(params).then(res => {
        if (res.status == 200) {
          let data = res.data
          for(let i = 0; i < data.length; i++  ) {
            data[i].fileTypeList  = []
            if(!data[i].release_time){
              data[i].release_time = ''
            }
            let fileTypeList = data[i].file_type_support_id
            if(fileTypeList.length > 0){
              for (let j  = 0; j  < fileTypeList.length; j ++) {
                fileTypeList[j] = parseInt(fileTypeList[j])                
              }
            }
            if (i == 0 ){
              this.activeName = data[i].site
            }
          }
          this.formList= data
          this.getAllFileTypeList()
          this.loading = false
        }
      })
    },
    submitForm(){
      let status = this.validateForm()
      if(status && !this.isSubmit){
        this.postData()
      }
    },
    validateForm () {
      let list = this.formList
      let status = true
      for ( let i = 0; i < list.length; i++ ){
        if (list[i].file_type_support_id.length == 0) {
          this.$message.error('字段文件类型为必填项')
          status = false
          break
        }
        if (list[i].file_name === '') {
          this.$message.error('站点' + list[i].site + '文件名称为必填项')
          status = false
          break
        }
         if (list[i].file_name.length > 60) {
          this.$message.error('站点' + list[i].site + '文件名称不可超过 60 字符')
          status = false
          break
        }
        if (list[i].file_no === '') {
          this.$message.error('站点' + list[i].site + '字段文件版本号为必填项')
          status = false
          break
        }
        if (list[i].file_no.length > 10) {
          this.$message.error('站点' + list[i].site + '文件版本号不可超过 10 字符')
          status = false
          break
        }
        if (list[i].release_time === '') {
          this.$message.error('站点' + list[i].site + '发布时间为必填项')
          status = false
          break
        }
        if (list[i].file === '') {
          this.$message.error('站点' + list[i].site + '字段上传文件称为必填项')
          status = false
          break
        }
        if (list[i].file_description === '') {
          this.$message.error('站点' + list[i].site + '字段文件说明为必填项')
          status = false
          break
        }  
        if (list[i].file_description.length > 200) {
          this.$message.error('站点' + list[i].site + '字段文件说明不可超过200字符')
          status = false
          break
        }   
      }
      return status
    },
    postData(){
      this.isSubmit = true
      let list = JSON.parse(JSON.stringify(this.formList))
      for(let i = 0; i < list.length; i++){
        let len = list[i].fileTypeList.length
        if(len  > 0){
          list[i].file_type_id = []
          list[i].file_type = [] 
        }
    
        for(let j = 0; j< len; j++) {
          if(list[i].file_type_support_id.indexOf( list[i].fileTypeList[j].support_id)> -1) {
            list[i].file_type_id.push(list[i].fileTypeList[j].id) 
            list[i].file_type.push(list[i].fileTypeList[j].label) 
          }
        }
      }
      for(let i = 0; i < list.length; i++){
        delete list[i].fileTypeList
        list[i].file_type_id.sort(function(a, b){
          return a > b
        })
        list[i].file_type_support_id.sort(function(a, b){
          return a > b
        })
        list[i].file_type_id = list[i].file_type_id.toString()
        list[i].file_type = list[i].file_type.toString()
        list[i].file_type_support_id = list[i].file_type_support_id.toString()
      }
      let params = {
        data: JSON.stringify(list),
        product_id: this.id
      }
      editPost(params).then(res=>{
        if(res.state == 1) {
          this.$message.success('编辑成功')
          this.cancle()
        }
       this.isSubmit = false
      })
    },
    cancle(){
      this.$emit('closeDialog')
    },
  }
}
</script>

<style lang="scss">

</style>